<template>
  <div class="weather-page">
    <el-card class="weather-card">
      <h2 class="page-title">今日天气预报</h2>
      <div v-if="weatherData && weatherData.length > 0">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="daily-card">
              <h3>{{ weatherData[0].fxDate }}</h3>
              <div class="icon">{{ weatherData[0].textDay }}</div>
              <div class="temp">
                {{ weatherData[0].tempMin }}°C ~ {{ weatherData[0].tempMax }}°C
              </div>
              <div class="wind">
                {{ weatherData[0].windDirDay }} {{ weatherData[0].windScaleDay }}级
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="16">
            <el-table :data="weatherData.slice(1)" border stripe>
              <el-table-column prop="fxDate" label="日期" width="120" />
              <el-table-column prop="textDay" label="白天天气" />
              <el-table-column prop="textNight" label="夜间天气" />
              <el-table-column prop="tempMin" label="最低温" width="80" />
              <el-table-column prop="tempMax" label="最高温" width="80" />
              <el-table-column prop="windDirDay" label="风力" />
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const weatherData = ref([]); // 初始化为空数组

onMounted(() => {
  fetchWeather('101010100');
});

const fetchWeather = async (locationCode) => {
  try {
    const response = await axios.get('https://n45rk57yaq.re.qweatherapi.com/v7/weather/3d', {
      params: {
        location: locationCode,
        key: '0576cd59abde4bbbbb7459ba787559e0'
      }
    });

    console.log('天气数据:', response.data); // 调试用，查看实际返回数据

    if (response.data.code === '200') {
      weatherData.value = response.data.daily;
    } else {
      ElMessage.error(`天气接口返回错误：${response.data.msg}`);
    }
  } catch (error) {
    ElMessage.error('网络请求失败，请检查网络连接');
    console.error(error);
  }
};
</script>

<style scoped>
.weather-page {
  padding: 20px;
}

.weather-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.daily-card {
  text-align: center;
  padding: 24px;
}

.icon {
  font-size: 2.5rem;
  margin: 16px 0;
}

.temp {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.el-table {
  margin-top: 20px;
}
</style>